import React, {Component} from 'react';
import {Form, Select, Input, Row, Col, Modal, Button} from 'antd'
import * as ReactDOM from "react-dom";
import { FetchAPI } from '../../utils/fetch-middleware';
import './style.less';

@Form.create()
class Forget extends Component {
    state = {
        visible: false,
    }
    handleClick = (e) => {
        console.log('click ', e);
    }

    // 添加用户信息
    addTcd = (para) => {
        // let sendValue = JSON.parse(JSON.stringify(this.state.validDataSource));
        let sendValue = this.props.form.getFieldsValue();
        debugger;
        console.log(sendValue, 'values');
        FetchAPI('/api/user/forget', 'POST', sendValue.acNo).then(result => {
            if(result.code === 'ACM0004'){
                Modal.success({
                    title: result.code,
                    content: '密码重置成功～',
                });
            } else {
                Modal.warning({
                    title: result.code,
                    content: result.message,
                });
            }
        }, err => {
            Modal.error({
                title: 'WRONG',
                content: '系统内部错误，请联系管理员',
            });
        });
    }

    handleOk = () => {
        this.addTcd();
        this.setState({
            visible: false,
        });
        //重置
        this.props.form.resetFields();

    }

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }

    onForget = () => {
        this.props.form.validateFieldsAndScroll(err => {
            if (!err) {
                this.setState({
                    visible: true,
                });
            }
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="forget">
                <Form>
                    <h2>请输入申诉账号：</h2>
                    <Form.Item
                        label="账号"
                        labelCol={{span: 10}}
                        wrapperCol={{span: 8}}
                    >
                        {getFieldDecorator('acNo', {
                                rules: [{
                                    required: true, message: '请输入账号!',
                                }],
                            }
                        )(
                            <Input style={{width: 200}}/>
                        )}
                    </Form.Item>
                    <Form.Item style={{textAlign: 'center'}}>
                        <Button onClick={this.onForget}>确认申诉</Button>
                    </Form.Item>
                </Form>
                <Modal
                    title="确定申诉？"
                    visible={this.state.visible}
                    content={null}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                />
            </div>
        );
    }
}

ReactDOM.render(<Forget />, document.getElementById('content'));